<template>
  <div class="app-container section-base">
    <el-row>
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="活动名称:" prop="title">
            <el-input
              style="width: 400px"
              v-model="queryParams.title"
              placeholder="请输入活动名称"
              clearable
              @clear="handleQuery"
              @keyup.enter.native="handleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="活动状态:">
            <el-select style="width: 400px" v-model="queryParams.state" placeholder="请选择" clearable
                       @change="handleQuery">
              <el-option
                v-for="dict in dict.type.activity_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div>
          <el-button class="draft-btn" size="small" type="primary" @click="goDraftList">草稿箱</el-button>
          <router-link :to="{path:'/activity/create/index',query: {type:'add'}}" class="link-type">
            <el-button size="small" type="primary">创建活动</el-button>
          </router-link>
        </div>
      </el-col>
    </el-row>
    <div class="section">
      <template v-for="(item, index) in dataList">
        <div class="section_item" :key="index">
          <div class="item_left">
            <div class="avator">
              <image-preview :src="item.cover" width="100%" height="100%"/>
            </div>
            <div class="content">
              <div class="contentTitle">{{ item.title }}</div>
              <div class="type">类型：{{ item.typeName }}</div>
              <div class="time">
              <span>
                <el-tag type="success" size="small"><dict-tag :options="dict.type.activity_status" :value="item.state"/></el-tag>
              </span>
                <span>
                {{ item.startTime }} - {{ item.endTime }}
              </span>
              </div>
              <div>
                <el-tag size="small">公有小程序</el-tag>
              </div>
            </div>

          </div>
          <div class="item_center">
            <div class="center_box">
              <div class="box-item">
                <template v-if="item.browseCount > 0">
                  <router-link :to="{path:'/triones/member/potential',query: {activityId: item.id}}"class="link-type">
                    <div class="name">浏览人数</div>
                    <div class="number">{{ item.browseCount }} <i class="el-icon-arrow-right"></i></div>
                  </router-link>
                </template>
                <template v-else>
                  <div class="name">浏览人数</div>
                  <div class="number">0</div>
                </template>
              </div>
              <div class="box-item">
                <template v-if="item.shareCount > 0">
                  <router-link :to="{path:'/triones/member/share',query: {activityId: item.id}}"class="link-type">
                    <div class="name">分享人数</div>
                    <div class="number">{{ item.shareCount }} <i class="el-icon-arrow-right"></i></div>
                  </router-link>
                </template>
                <template v-else>
                  <div class="name">分享人数</div>
                  <div class="number">{{ item.shareCount }}</div>
                </template>
              </div>
              <div class="box-item">
                <div class="name">付款人数</div>
                <div class="number">{{ item.buyCount }}</div>
              </div>
              <div class="box-item">
                <div class="name">支付总额</div>
                <div class="number">{{ item.payAmountTotal }}</div>
              </div>
              <div class="box-item">
                <template v-if="item.distributionAmountTotal > 0">
                  <router-link :to="{path:'/activity/distribution-record/index',query: {activityId: item.id}}"class="link-type">
                    <div class="name">分佣金额</div>
                    <div class="number">{{ item.distributionAmountTotal }} <i class="el-icon-arrow-right"></i></div>
                  </router-link>
                </template>
                <template v-else>
                  <div class="name">分佣金额</div>
                  <div class="number">0</div>
                </template>
              </div>
              <div class="box-item">
                <div class="name">实收总额</div>
                <div class="number">{{ item.actualAmountTotal }}</div>
              </div>
              <div class="box-item">
                <div class="name">满团数</div>
                <div class="number">{{ item.fillCount }}</div>
              </div>
              <div class="box-item">
                <div class="name">开团数</div>
                <div class="number">{{ item.reachCount }}</div>
              </div>
              <div class="box-item">
                <div class="name">总数</div>
                <div class="number">{{ item.buyCount }}</div>
              </div>
              <div class="box-item" v-if="item.isOptionalIdentity">
                <div class="name">新生</div>
                <div class="number">{{ item.newMemberOrderCount }}</div>
              </div>
              <div class="box-item" v-if="item.isOptionalIdentity">
                <div class="name">老生</div>
                <div class="number">{{ item.oldMemberOrderCount }}</div>
              </div>
              <div class="box-item">
                <div class="name">成团数</div>
                <div class="number">{{ item.achieveTeamCount }}</div>
              </div>
            </div>
            <div v-if="item.notPayHaveMobile > 0">
              <div class="noPayMemberRouterLink">
                <div class="noPayMemberRouterLinkImg">
                  <img src="@/assets/images/activity/activity_phonenum.png" alt="activity_phonenum">
                  <span>{{ item.notPayHaveMobile }}个未购买用户留下手机号</span>
                </div>
                <div class="noPayMemberRouterLinkBtn">
                  <router-link :to="{path:'/triones/member/potential',query:{memberStatus: '1',activityId: item.id}}"class="link-type">
                    去查看
                    <i class="el-icon-arrow-right"></i>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="item_right">
            <div class="item-btn">
              <div class="btn-top">
                <router-link :to="{path:'/activity/activity-manage-detail/index',query:{id: item.id,title: item.title}}"
                             class="link-type">
                  <el-button class="btn" type="primary">报名表</el-button>
                </router-link>
              </div>
              <div class="btn-center">
                <el-button size="small" @click="goUpdatePoster(item)">修改海报</el-button>
                <el-button size="small" @click="goUpdateActivity(item)">编辑</el-button>
                <el-button size="small" @click="goView(item)">查看</el-button>
                <el-button size="small" @click="goCopyActivity(item)">复制</el-button>
              </div>
              <div class="btn-bottom">
                <router-link class="link-type" :to="{path:'/activity/bigdata/index',query: { activityId: item.id}}" target="_blank">
                  <el-button type="text" class="btn-bottom-item">数据大屏</el-button>
                </router-link>
                <router-link :to="{path:'/staff',query: {tabsActiveName:'staffOfTeamData'}}" class="link-type">
                  <el-button type="text" class="btn-bottom-item">员工数据</el-button>
                </router-link>
                <el-button type="text" class="btn-bottom-item" @click="activityDel(item)">删除活动</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog title="草稿箱" :visible.sync="draftOpen" width="800px" :inlist="true">
      <el-table ref="multipleTable" :data="draftDataList">
        <el-table-column label="活动名称" key="realname" width="350">
          <template slot-scope="scope">
            <div class="draft-rows">
              <div class="item-img">
                <image-preview :src="scope.row.cover" width="100%" height="100%"/>
              </div>
              <div class="content">
                <el-tooltip placement="top">
                  <div slot="content" class="activityTitle">
                    {{ scope.row.title }}
                  </div>
                  <div class="text-ellipsis">{{ scope.row.title }}</div>
                </el-tooltip>
                <div class="type">类型：{{ scope.row.typeName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" prop="updateTime" key="updateTime" width="230"/>
        <el-table-column label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <router-link :to="{path:'/activity/create/index',query: {type:'edit',id: scope.row.id}}" class="link-type">
              <el-button size="small" type="primary">继续编辑</el-button>
            </router-link>
            <el-button class="delDraft" size="small" @click="delDraft(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="draftTotal>0"
        :total="draftTotal"
        :page.sync="draftQueryParams.pageNum"
        :limit.sync="draftQueryParams.pageSize"
        @pagination="getDraftDataList()"
      />
    </el-dialog>

    <el-dialog title="查看活动" :visible.sync="activityShareOpen" width="600px" :inlist="true" @close="closeActivityShare">
      <div class="activity-share-base" v-loading="loading" element-loading-text="拼命加载中">
        <div class="activity-share-poster">
          <img :src="templatePosterImg" alt="">
        </div>
        <div class="activity-share-text">
          <div class="activity-share-url">
            <div class="activity-share-url-title">
              活动链接：
            </div>
            <div class="activity-share-url-content">
              <el-input
                size="small"
                v-model="shareUrlLink" disabled>
                <el-button type="primary" slot="append" @click="copyText">复制</el-button>
              </el-input>
            </div>
          </div>
          <div class="activity-share-qr-img">
            <img v-if="qrCode === 'general'" :src="activityQrImg"/>
            <!--小程序活动二维码-->
            <img v-if="qrCode === 'official'" :src="activityMiniQrImg" width="150" height="150"/>
          </div>
          <div class="activity-share-qr-but">
            <el-button v-if="qrCode === 'general'" type="primary" size="mini" @click="qrCode = 'official'">切换为小程序码</el-button>
            <el-button v-if="qrCode === 'official'" type="primary" size="mini" @click="qrCode = 'general'">切换为二维码</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {pageList, delActivity, getDraftDataList, subscribeToUrl, templatePosterImg} from "@/api/triones/activity";
import moment from "moment";
import AraleQRCode from "arale-qrcode";

export default {
  name: "index",
  dicts: ['activity_status'],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        state: undefined
      },
      dataList: [],
      total: 0,
      draftOpen: false,
      draftDataList: [],
      draftTotal: 0,
      draftQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      activityShareOpen: false,
      shareUrlLink: '',
      activityItem: null,
      // 普通方形的二维码
      activityQrImg: '',
      // 小程序样式的活动二维码
      activityMiniQrImg: '',
      // general：普通二维码、official：官方
      qrCode: 'general',
      templatePosterImg: ''
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 获取列表 */
    getList() {
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置 */
    resetQuery() {

    },
    /** 删除活动 */
    activityDel(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除活动名称为"' + row.title + '"的数据项？').then(function () {
        return delActivity(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 去草稿箱列表 */
    goDraftList() {
      this.draftDataList = [];
      this.draftQueryParams.pageNum = 1;
      this.getDraftDataList();
      this.draftOpen = true;
    },
    /** 获取草稿列表 */
    getDraftDataList() {
      getDraftDataList(this.draftQueryParams).then(response => {
        this.draftDataList = response.rows;
        this.draftTotal = response.total;
      })
    },
    /** 删除活动 */
    delDraft(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除活动名称为"' + row.title + '"的数据项？').then(function () {
        return delActivity(id);
      }).then(() => {
        this.getDraftDataList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 去查看活动分享相关 */
    goView(item) {
      this.activityItem = item;
      this.getSubscribeToUrl();
      this.getTemplatePosterImg();
      this.activityShareOpen = true;
    },
    /** 获取活动短链接 */
    getSubscribeToUrl() {
      let query = 'activityId=' + this.activityItem.id;
      subscribeToUrl(query).then(response => {
        console.log('this.shareUrlLink',response.data.urlLink)
        this.shareUrlLink = response.data.urlLink;
        if (response.data.urlLink) {
          this.makeCode(response.data.urlLink);
          this.loading = false;
        }
      })
    },
    /** 获取活动模板海报 */
    getTemplatePosterImg() {
      this.loading = true;
      const data = {
        activityId: this.activityItem.id,
        scene: 'isShare=0&activityId=' + this.activityItem.id + '&staffId=0&shareId=0&shareRecordId=0&sharedTeamId=null'
      }
      templatePosterImg(data).then(response => {
        this.templatePosterImg = response.data.imgUrl;
        this.activityMiniQrImg = response.data.imgMiniCodeUrl;
        this.loading = false;
      })
    },
    /** 复制文本 */
    copyText() {
      // 创建一个临时的 textarea 元素。
      const el = document.createElement('textarea');
      el.value = this.shareUrlLink;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      this.$message.success('复制成功');
    },
    /** 生成二维码 */
    makeCode(text) {
      // const text = 'https://wxaurl.cn/zWtJbnRMhKg';
      const result = new AraleQRCode({
        render: "svg",
        text: text,
        size: 150,
      });
      const svgXml = new XMLSerializer().serializeToString(result);
      const src =
        "data:image/svg+xml;base64," +
        window.btoa(unescape(encodeURIComponent(svgXml)));
      // 本地存储图片
      localStorage.setItem("image", src);
      this.getQrCodeImg();
    },
    /** 获取存储的图片给到页面 */
    getQrCodeImg() {
      this.activityQrImg = localStorage.getItem("image");
      localStorage.removeItem("image");
    },
    /** 关闭查看活动 */
    closeActivityShare() {
      this.activityShareOpen = false;
      this.qrCode = 'general';
      this.activityQrImg = '';
      this.activityItem = null;
      this.loading = true;
    },
    /** 修改海报 */
    goUpdatePoster(item) {
      this.$router.push({ path: '/activity/poster/index',query: {id: item.id}})
    },
    /** 编辑活动 */
    goUpdateActivity(item) {
      if (item.state === 2) {
        this.$message.error("活动已结束，不允许编辑！！！");
      } else {
        this.$router.push({ path: '/activity/update/index',query: {id: item.id}})
      }
    },
    /** 复制活动 */
    goCopyActivity(item) {
      this.$router.push({ path: '/activity/copy/index',query: {id: item.id}})
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-button--medium {
  padding: 10px 10px;
}

.section-base {
  overflow-x: auto;
  padding-bottom: 10px;
}
.section {
  min-width: 1200px;
  max-width: 100%;
  .section_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    border-bottom: 1px solid #e8e8e8;
    position: relative;

    .item_left {
      display: flex;
      align-items: center;
      .avator {
        margin-right: 15px;
        position: relative;
        height: 110px;
        width: 110px;
      }
      .content {
        width: 350px;
        height: auto;
        font-size: 14px;

        .contentTitle {
          font-weight: bolder;
        }

        .type {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
          margin: 10px 0;
        }

        .time {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
          margin: 10px 0;
        }
      }
    }

    .center_box {
      height: auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-width: 410px;
      .box-item {
        width: 90px;
        padding: 5px 0;
        margin: 0 10px 10px 0;
        background: #f8f8f9;
        border-radius: 4px;
        text-align: center;
        color: #333;
        font-size: 12px;
      }
    }

    .item_right {
      min-width: 250px;
      .item-btn {
        padding: 0 20px;
        text-align: right;
        .btn-top {
          .btn {
            width: 100%;
          }
        }
        .btn-center {
          width: 100%;
          margin: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 5px;
        }
        .btn-bottom {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .btn-bottom-item {
            font-size: 14px;
            padding: 0;
          }
        }
      }
    }

    .noPayMemberRouterLink {
      max-width: 400px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 15px;
      height: 30px;
      border: 1px solid #edb054;
      background-color: #fffbe6;
      font-size: 12px;
      .noPayMemberRouterLinkImg {
        width: 50%;
        align-content: center;
        img {
          height: 15px;
          vertical-align: middle;
        }
        span {
          margin-left: 10px;
          vertical-align: middle;
        }
      }
      .noPayMemberRouterLinkBtn {
        width: 50%;
        text-align: right;
        align-content: center;
      }
    }
  }
}

.draft-btn {
  margin: 0 10px;
}

.draft-rows {
  display: flex;
  align-items: center;
  .item-img {
    width: 70px;
    height: 70px;
  }
  .content {
    height: auto;
    padding-left: 20px;
    justify-content: space-between;
    font-size: 14px;
    .contentTitle {
      font-weight: bolder;
    }
  }
}

.activityTitle {
  max-width: 300px;
  font-size: 14px;
}

.text-ellipsis {
  width:170px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.delDraft {
  margin-left: 10px;
}

.activity-share-base {
  display: flex;
  align-content: center;
  .activity-share-poster {
    width: 180px;
    height: 300px;
    background-color: #00afff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .activity-share-text {
    padding-left: 20px;
    width: calc(100% - 180px);
    height: auto;
    .activity-share-url {
      display: flex;
      align-content: center;
      .activity-share-url-title {
        width: 70px;
        align-content: center;
      }
      .activity-share-url-content {
        width: calc(100% - 70px);
      }
    }
    .activity-share-qr-img {
      padding-top: 20px;
      text-align: center;
    }
    .activity-share-qr-but {
      padding-top: 10px;
      text-align: center;
    }
  }
}
</style>
